<!DOCTYPE html>
<html>
<head>
    <title>Vue计算属性示例 - Getter和Setter</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .container {
            margin: 20px;
            font-family: Arial, sans-serif;
        }
        .result {
            margin-top: 20px;
            font-weight: bold;
            color: #333;
        }
        input {
            margin: 5px;
            padding: 5px;
        }
        .section {
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <h2>计算属性示例（Getter和Setter）</h2>
        
        <!-- 第一部分：简单计算属性 -->
        <div class="section">
            <h3>简单计算属性（只读）</h3>
            <div>
                <label>第一个数字：</label>
                <input type="number" v-model.number="num1">
            </div>
            <div>
                <label>第二个数字：</label>
                <input type="number" v-model.number="num2">
            </div>
            <div class="result">
                <p>两数之和：{{ sum }}</p>
            </div>
        </div>

        <!-- 第二部分：带getter和setter的计算属性 -->
        <div class="section">
            <h3>带getter和setter的计算属性</h3>
            <div>
                <label>姓：</label>
                <input type="text" v-model="firstName">
            </div>
            <div>
                <label>名：</label>
                <input type="text" v-model="lastName">
            </div>
            <div class="result">
                <p>完整姓名：{{ fullName }}</p>
            </div>
            <div>
                <label>通过计算属性修改完整姓名：</label>
                <input type="text" v-model="fullName">
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    // 第一部分的数据
                    num1: 0,
                    num2: 0,
                    // 第二部分的数据
                    firstName: '张',
                    lastName: '三'
                }
            },
            computed: {
                // 只读计算属性
                sum() {
                    return this.num1 + this.num2
                },
                // 可读写计算属性
                fullName: {
                    // getter方法
                    get() {
                        return this.firstName + ' ' + this.lastName
                    },
                    // setter方法
                    set(newValue) {
                        // 假设输入的格式是 "姓 名"
                        const names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[1] || ''
                    }
                }
            }
        }).mount('#app')
    </script>
</body>
</html>